var AttendanceDetail = function () {
  var template = /*html*/ `
    <div class="attendance-detail">
      <div class="attendance-info" style="font-size:16px;">{{detail.userName}}</div>
      <div class="attendance-info" style="color:#AFAFAF">
        <span v-if="detail.classId!==null">
           班次{{detail.className}} {{detail.attendanceTime}}
        </span>
        <span>
          考勤组:{{detail.groupName}}
        </span>
      </div>
      <div class="attendance-info">
        今日打卡{{count}}次，工时共计{{SysUtil.getDurationStr(workTime)}}
      </div>
      <div class="attendance-info" v-if="detail.classId===null">当天休息</div>

      <template v-for="(leave,index) in detail.leaveList">
      <div class="attendance-info" :key="'leave_'+index">
        {{i18n.getMsg('attendance.takeOffType.'+leave.type)}}
        {{moment(leave.startTime).format('YYYY-MM-DD HH:mm')}}~{{moment(leave.endTime).format('YYYY-MM-DD HH:mm')}}
        （共{{leave.duration}}小时）
      </div>
      </template>

      <div class="attendance-detail-table-div">
        <el-table fit stripe border class="attendance-detail-table" :data="detail.clockList" style="width: 100%">
          <el-table-column :resizable="false" label="考勤时间" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.baseCheckTime).format('HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="打卡时间" align="center">
            <template slot-scope="scope">
              <span v-if="!SysUtil.isEmpty(scope.row.userCheckTime)">
                {{moment(scope.row.userCheckTime).format('HH:mm')}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="打卡结果" align="center">
            <template slot-scope="scope">
              <div :class="'status-'+scope.row.className">
                <span>{{status[scope.row.status]}}</span>
                <span v-if="scope.row.rangeTime!==null">
                  {{SysUtil.getDurationStr(scope.row.rangeTime)}}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      detail: {
        type: Object,
        required: true
      },
      isFormat: {
        type: Boolean,
        default: true
      }
    },
    data: function () {
      this.formatDetail();
      return {
        count: this.getAttendanceTimes(),
        workTime: this.detail.duration,
        SysUtil: SysUtil,
        moment: moment,
        i18n:i18n,
        status: {
          normal: "正常",
          late: "迟到",
          early: "早退",
          lack: "缺卡",
          leave: "请假"
        }
      };
    },
    methods: {
      getAttendanceTimes: function () {
        var detail = this.detail;
        var clockList = detail.clockList;
        clockList = _.filter(clockList, function (clock) {
          return !SysUtil.isEmpty(clock.userCheckTime);
        });
        return clockList.length;
      },

      formatDetail: function () {
        var detail = this.detail;
        var clockList = _.clone(detail.clockList);
        if (clockList.length === 0) {
          return 0;
        }

        var leaveList = detail.leaveList;
        if (this.isFormat) {
          for (var i = 0; i < clockList.length; i++) {
            var clock = clockList[i];
            this.formatClock(clock, leaveList);
          }
        }

        clockList = _.orderBy(clockList, ['baseCheckTime'], ['asc']);
        detail.clockList = clockList;
      },

      formatClock: function (clock, leaveList) {
        var userCheckTime = clock.userCheckTime;
        if (!SysUtil.isEmpty(userCheckTime)) {
          userCheckTime = moment(userCheckTime).startOf('minute').valueOf();
          clock.userCheckTime = userCheckTime;
        }

        var status = clock.timeResult;
        var rangeTime = null;
        if (status === 'late' || status === 'early') {
          rangeTime = ModuleUtil.getAttendanceDelayTime(clock, status, leaveList);
          if (rangeTime <= 0) {
            status = 'leave';
            rangeTime = null;
          }
        } else if (status === 'lack' || status === 'normal') {
          var isLeave = this.hasLeave(clock, leaveList);
          if (isLeave) {
            status = 'leave';
          }
        }

        if (status === 'normal') {
          clock.className = "normal";
        } else {
          clock.className = "abnormal";
        }

        clock.status = status;
        clock.rangeTime = rangeTime;
      },

      hasLeave: function (clock, leaveList) {
        if (leaveList.length === 0) {
          return false;
        }

        var baseCheckTime = clock.baseCheckTime;
        var leave = _.find(leaveList, function (leave) {
          var startTime = leave.startTime;
          var endTime = leave.endTime;
          return moment(baseCheckTime).isBetween(startTime, endTime, 'minute', '[]');
        });

        if (leave !== undefined) {
          leave = _.cloneDeep(leave);
          leave.startTime = moment(leave.startTime).valueOf();
          leave.endTime = moment(leave.endTime).valueOf();
          clock.leaveData = leave;
          return true;
        }
        return false;
      }
    },
    template: template
  };
}();